body{
	padding:50px;
}
input{
	display:inline-block;
	width:300px;
}
label{
	display:inline-block;
	width:100px;
}
.card-container{
	margin: 50px 100px;
	float:left;
}
.card-container.flip  .card{
    -webkit-transform: perspective(2000) rotateY(180deg);
}
.card{
	 /*background:#fcfcfc; can't put background here or the backface will disappear upon flipping*/
	 width:600px;
	 height: 350px;
	 padding: 25px;
	 transition: 1s;
	 transform-style: preserve-3d;
	 position: relative;
}
#reel{
	position:absolute;
	width:7000px;
	left:0;
	top:0;
	background:#f0f0f0;
	transition: all 1s ease-in-out;
}
#reel-container{
	position:relative;
	width:850px;
	height:500px;
	overflow:hidden;
	margin: 0 auto;
	border: 1px solid #ddd;
	border-radius: 3px;
}
#nav-container{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	flex-direction: row;
	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	-webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
	;
	width:850px;
	height:100px;
	margin: auto;
	border: 1px solid #ddd;
	border-radius: 3px;
	background:#fcfcfc;
}
.navthumb{	
	background:#e8e8e8;
    margin: 0 auto;
	text-align:center;
	height:50px;
	line-height:50px;
	width:80px;
	border-radius: 3px;
}
.navthumb.focus{	
	border:3px solid #96D8B7;
}
.back,.front {
	padding: 25px;
    backface-visibility: hidden;
	width:600px;
	height:350px;
	position:absolute;
	left:0;
	top:0;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 0 0 5px #aaa;
}
.front {
	z-index: 2;
	transform: rotateY(0deg);
	background:#fcfcfc;
}
.back {
    transform: rotateY(-180deg) translateZ(1px);
	background: #fcfcfc;
}